<template>
  <div class="card content-box">
    <div class="deviceLayout">
      <div class="layoutInfoWrap">
        <div class="tabBar">
          <TabBar :activeIndex="activeIndex" :tabList="tabList" />
        </div>
        <div class="layoutInfo">
          <div class="layout">
            <DeviceForm />
          </div>
          <div class="deviceMenuList">
            <TreeFilter
              label="name"
              title=""
              :data="deviceMenu"
              :multiple="true"
              :needSearch="false"
              :onlyLeafNodeHighlight="false"
              @change="_change"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="handlerBarWrap">
      <HandlerBar :handlerBtns="handlerBtns" />
    </div>
  </div>
</template>

<script setup lang="tsx" name="deviceControl">
import { reactive, ref } from "vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import HandlerBar from "@/components/HandlerBar/index.vue";
import TabBar from "@/components/TabBar/index.vue";
import DeviceForm from "../components/DeviceForm/index.vue";
import { Position } from "@element-plus/icons-vue";

const activeIndex = ref(0);
const tabList = ref(["A面", "B面", "C面"]);

const deviceSettingMenu = ref([
  {
    id: "1",
    name: "参数位置",
    children: [
      { id: "11", name: "复位" },
      { id: "12", name: "设置串口通讯参数" },
      { id: "13", name: "设置IP及端口" },
      { id: "14", name: "设置计时器状态" },
      { id: "15", name: "设置语音" }
    ]
  },
  {
    id: "2",
    name: "参数设置",
    children: [
      { id: "21", name: "读取串口通讯参数" },
      { id: "22", name: "读取IP及端口" },
      { id: "23", name: "读取计时器时间" }
    ]
  }
]);
const deviceMenu = ref([
  {
    id: "1",
    name: "装置列表",
    children: [
      { id: "11", name: "装置1" },
      { id: "12", name: "装置2" },
      { id: "13", name: "装置3" }
    ]
  }
]);

const curTab = ref(deviceSettingMenu.value[0].children[0].id);
// const title = ref(deviceSettingMenu.value[0].children[0].name);
/**
 * 底部操作栏按钮组
 */
const handlerBtns = reactive([
  {
    name: "命令下发",
    type: "primary",
    icon: Position,
    plain: false,
    class: "save"
  }
]);
const _change = function (id: string): void {
  curTab.value = id;
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
